<template>
  <div class="_wz_standardOutline">

    <template v-if="pageShow">
      <Card dis-hover :bordered="true">
        <template #title>搜索</template>
        <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
          <FormItem label="制度名称">
            <i-input v-model="formDataSearch.standardName" placeholder="请填写制度名称" clearable />
          </FormItem>
          <FormItem label="完成状态">
            <i-select v-model="formDataSearch.standardState" filterable placeholder="请选择完成状态" clearable>
              <Option :value="0">未上传</Option>
              <Option :value="1">已上传</Option>
            </i-select>
          </FormItem>
          <FormItem label="有效状态">
            <i-select v-model="formDataSearch.standardExpire" filterable placeholder="请选择完成状态" clearable>
              <Option :value="0">失效</Option>
              <Option :value="1">正常</Option>
            </i-select>
          </FormItem>
          <FormItem label="经营企业">
            <i-input v-model="formDataSearch.deptName" placeholder="请输入经营企业" clearable />
          </FormItem>
          <FormItem label="经营类型">
            <i-select v-model="formDataSearch.deptTransportCode" filterable placeholder="请选择经营类型" clearable>
              <Option v-for="item in transportTypeList" :key="item.value" :value="item.code">{{ item.value }}</Option>
            </i-select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="searchSubmit">搜索</Button>
          </FormItem>
        </Form>
      </Card>
      <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
        <template #title>列表</template>
        <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
      </Card>

    </template>

  </div>
</template>
<script>


import {resolveComponent,getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


import wzTbale from "../../components/table/index.vue";
import {systemDictList} from "../../util/commonInterfaces.js";//字典接口

//reactive
export default defineComponent({
  name: 'standardOutline',//组件名称
  components: {
    wzTbale,//表格
  },//组件引用
  setup (props,context) {



    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法

    // 用于获取$refs
    const wzTbale = ref();



    //监听
    watch(() => router,(news, old) => {
      pageInit();
    },{deep: true});


    const state = reactive({
      transportTypeList:[],//经营类型
      pageShow:false,//页面显示状态
      formDataSearch:{},//搜索条件

      tableData: {
        url: apiUrl.safetyStandardOutlineSystemStandardOutlinePageList,//请求地址
        method: 'post',//请求方式
        where: { },//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          //表头数据
          { type: "index", width: 70, align: "center", title: "序号" },
          { title: "制度名称", minWidth: 290, key: "standardName",tooltip:true,resizable: true, render: (h, params) => {
              let title = [h('span', params.row.standardName ? params.row.standardNo +' '+ params.row.standardName : "--")]
              if (params.row.standardUpdate == 2){
                title.push(
                    h('Icon', { props: {type: 'ios-send',},style: {"color": "#46e719","marginLeft":"5px",},on: {
                        click: () => { }
                      }},''),
                )
              }
              return h('div',[title])
            }
          },

          { title: "完成状态", minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if (!params.row.standardState) {
                return h(resolveComponent('Tag'), { type: "dot", color: "#EEE" }, '未上传');
              } else {
                return h(resolveComponent('Tag'),  { type: "dot", color: "primary" }, '已上传');
              }
            }
          },

          { title: "有效状态", minWidth: 140,tooltip:true,resizable: true, render: (h, params) => {
              if (params.row.standardState){
                if (!params.row.standardExpire) {
                  return h(resolveComponent('Tag'),  { type: "dot", color: "warning" }, '失效');
                } else {
                  return h(resolveComponent('Tag'),  { type: "dot", color: "success" }, '正常');
                }
              }else {
                return h(resolveComponent('Tag'),  { type: "dot", color: "#eee" }, '未生效');
              }
            }
          },
          { title: "经营企业", minWidth: 260,tooltip:true,resizable: true, key: "deptName" },

          { title: "经营类型", minWidth: 140,tooltip:true,resizable: true, key: "deptTransportName" },
          {
            title: "完成时间", minWidth: 160,tooltip:true,resizable: true, key: "standardDate", render: (h, params) => {
              return h('span', params.row.standardDate ? params.row.standardDate : '--')
            }
          },
          {
            title: "到期时间", minWidth: 160,tooltip:true,resizable: true, key: "standardDate", render: (h, params) => {
              return h('span', params.row.standardExpireDate ? params.row.standardExpireDate : '--')
            }
          },
          { title: "创建时间", minWidth: 190,tooltip:true,resizable: true, key: "createTime" },
          { title: "修改时间", minWidth: 190,tooltip:true,resizable: true, key: "updateTime" },
          {
            title: '操作', width: 80, fixed: 'right', render: (h, params) => {

              var operationButtons = [];
              operationButtons.push(
                  h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick: () => {
                      if (params.row.standardUploadUrl) {
                        window.open(apiUrl.export + params.row.standardUploadUrl)
                      } else {
                        $ViewUIPlus.Message.warning('暂未上传文件');
                      }

                    }
                  }, "查看")
              )
              return operationButtons;
            }
          },
        ],
        pagingParameters:{// 分页参数
          page:'page',
          limit:'limit'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },

    });


    //搜索方法
    const searchSubmit = ()=>{
      let formDataSearch = JSON.parse(JSON.stringify(state.formDataSearch));
      state.tableData.where = formDataSearch;
      wzTbale.value.tableLoadData(true)

    }


    //页面初始化
    const pageInit = ()=>{
      state.pageShow = false;
      nextTick(()=>{
        state.formDataSearch = {
          standardParentKey :!!router.currentRoute.value.meta.menuParam ? router.currentRoute.value.meta.menuParam : ''
        };
        state.tableData.where = state.formDataSearch;
        state.pageShow = true;
      })
    }




    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      state.transportTypeList = await systemDictList({type: 'transport_type'})
      pageInit()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      searchSubmit,//搜索方法
      wzTbale,// ref 使用 封装的表格
    }
  }
})


</script>
<style lang="less">
._wz_standardOutline{
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>
